interface DataSourceItem {
  name: string;
  desc: string;
  tags: string[];
  icon: string;
  iconClass: string;
}

const dataSourceList: Array<DataSourceItem> = [
  {
    iconClass: "html-icon",
    icon: "H",
    name: "HTML",
    desc: "HTML（超文本标记语言）是用于创建网页结构的标准标记语言。它使用标记标签来描述网页内容的结构和语义。",
    tags: ["语义化标签", "表单元素", "多媒体支持", "链接与导航", "HTML5"],
  },
  {
    iconClass: "css-icon",
    icon: "C",
    name: "CSS",
    desc: "CSS（层叠样式表）用于描述网页的呈现方式，包括布局、颜色、字体等视觉效果。它使开发者能够将内容与表现分离。",
    tags: ["选择器", "盒模型", "Flexbox", "Grid布局", "动画与过渡"],
  },
  {
    iconClass: "js-icon",
    icon: "J",
    name: "JavaScript",
    desc: "JavaScript 是一种高级编程语言，用于为网页添加交互性。它可以操作DOM、处理事件、实现动画效果，并与服务器进行通信。",
    tags: ["变量与数据类型", "函数与对象", "DOM操作", "异步编程", "ES6+特性"],
  },
  {
    iconClass: "less-icon",
    icon: "L",
    name: "Less",
    desc: "Less 是一种CSS预处理语言，扩展了CSS的功能，增加了变量、混合、函数等特性，使CSS编写更灵活、更易于维护。",
    tags: [
      "变量定义",
      "嵌套规则",
      "混合（Mixins）",
      "函数与运算",
      "导入文件",
      "编译为CSS",
    ],
  },
  {
    iconClass: "scss-icon",
    icon: "S",
    name: "SCSS/Sass",
    desc: "SCSS（Sass的新语法）是一种功能强大的CSS预处理语言，提供变量、嵌套、混合、继承等高级特性，大大提升CSS的编写效率。",
    tags: [
      "变量与数据类型",
      "嵌套与导入",
      "混合与继承",
      "控制指令",
      "函数库",
      "SCSS与Sass语法",
    ],
  },
  {
    iconClass: "jquery-icon",
    icon: "JQ",
    name: "jQuery",
    desc: "jQuery 是一个快速、简洁的JavaScript库，封装了大量常用的DOM操作、事件处理、动画效果和AJAX交互等功能，使JavaScript开发更简单。",
    tags: ["简化DOM操作", "事件处理", "动画效果", "AJAX封装", "链式语法"],
  },
  {
    iconClass: "bootstrap-icon",
    icon: "BS",
    name: "Bootstrap",
    desc: "Bootstrap 是一个流行的前端UI框架，提供了丰富的CSS样式和JavaScript组件，帮助开发者快速构建响应式、美观的网页界面。",
    tags: ["栅格系统", "UI组件库", "响应式设计", "自定义主题", "移动优先"],
  },
  {
    iconClass: "vue-icon",
    icon: "V",
    name: "Vue",
    desc: " Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，核心库只关注视图层。",
    tags: [
      "双向数据绑定",
      "组件化开发",
      "虚拟DOM",
      "Vue 3 + Composition API",
      "Vue Router",
    ],
  },
  {
    iconClass: "react-icon",
    icon: "R",
    name: "React",
    desc: " React 是一个用于构建用户界面的JavaScript库，由Facebook开发并维护。它采用组件化思想，使用虚拟DOM提高渲染性能。",
    tags: ["组件化思想", "虚拟DOM", "JSX语法", "单向数据流", "Hooks"],
  },
  {
    iconClass: "ts-icon",
    icon: "TS",
    name: "TypeScript",
    desc: "TypeScript 是JavaScript的超集，添加了静态类型系统。它可以在开发阶段捕获错误，提高代码质量和可维护性，最终编译为纯JavaScript。",
    tags: ["静态类型检查", "接口与类型", "类与继承", "泛型", "与JS兼容"],
  },
  {
    iconClass: "taro-icon",
    icon: "T",
    name: "Taro",
    desc: "Taro 是一个开放式跨端跨框架解决方案，支持使用React、Vue、Vue3、NutUI等框架来开发微信/京东/百度/支付宝/字节跳动/QQ小程序/H5/React Native等应用。",
    tags: [
      "一次编写多端运行",
      "支持多框架",
      "小程序兼容",
      "H5支持",
      "性能优化",
    ],
  },
  {
    iconClass: "mp-icon",
    icon: "微",
    name: "微信小程序",
    desc: "微信小程序是一种不需要下载安装即可使用的应用，运行在微信内部，具有接近原生App的体验。采用类HTML、CSS和JavaScript的开发方式。",
    tags: ["WXML模板", "WXSS样式", "小程序框架", "微信生态整合", "云开发能力"],
  },
  {
    iconClass: "uniapp-icon",
    icon: "Uni",
    name: "UniApp",
    desc: "UniApp 是一个使用Vue.js开发所有前端应用的框架，编写一套代码，可发布到iOS、Android、Web（H5）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。",
    tags: [
      "一次开发多端部署",
      "Vue语法兼容",
      "丰富的API",
      "小程序兼容",
      "H5与App支持",
    ],
  },
  {
    iconClass: "antd-icon",
    icon: "Ant",
    name: "Ant Design(vue/react)",
    desc: "Ant Design 是一套企业级UI设计语言和组件库，提供了丰富的高质量组件，用于构建美观且功能完善的中后台产品。",
    tags: ["企业级设计", "丰富组件库", "主题定制", "TypeScript支持", "国际化"],
  },
  {
    iconClass: "element-icon",
    icon: "El",
    name: "Element Plus",
    desc: "Element Plus 是基于Vue 3的企业级UI组件库，是Element UI的升级版本，提供了丰富的组件和友好的开发体验，适用于中后台系统开发。",
    tags: ["丰富组件", "TypeScript支持", "自定义主题", "国际化", "按需引入"],
  },
  {
    iconClass: "nutui-icon",
    icon: "Nut",
    name: "NutUI",
    desc: "NutUI 是一套轻量级、高质量的移动端UI组件库，基于Vue.js开发，专注于为移动端应用提供一致的UI体验，支持多端适配。",
    tags: [
      "移动端优先",
      "Vue支持",
      "轻量高效",
      "主题定制",
      "多端适配",
      "按需加载",
    ],
  },

  {
    iconClass: "uniui-icon",
    icon: "U",
    name: "Uni UI",
    desc: "Uni UI 是基于uni-app开发的一套跨端UI组件库，提供了丰富的组件，支持在iOS、Android、H5、以及各种小程序平台上使用。",
    tags: [
      "跨端兼容",
      "uni-app生态",
      "丰富组件",
      "性能优化",
      "按需引入",
      "主题定制",
    ],
  },
  {
    iconClass: "echarts-icon",
    icon: "Ec",
    name: "ECharts",
    desc: "ECharts 是一个基于JavaScript的开源可视化图表库，提供了丰富的图表类型和交互功能，可用于数据可视化展示，支持多种设备。",
    tags: [
      "多种图表类型",
      "交互式体验",
      "动态数据",
      "响应式设计",
      "自定义样式",
      "3D可视化",
    ],
  },
];


const scrollList = [
  '测试元素1',
  '测试元素2',
  '测试元素3',
  '测试元素4',
  '测试元素5',
  '测试元素6',
  '测试元素7',
  '测试元素8',
  '测试元素9',
  '测试元素10',
];

export { dataSourceList , scrollList };
